<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div>
		<p>爱好</p>
		<input type="checkbox" value="choose" id = "all">全选<br>
		<div class="items">
			<input type="checkbox" value="read">阅读<br>
			<input type="checkbox" value="swim">游泳<br>
			<input type="checkbox" value="program">编程<br>
			<input type="checkbox" value="smoke">抽烟<br>
			<input type="checkbox" value="game">游戏<br>
			<input type="checkbox" value="drink">喝酒<br>
		</div>
		<button>全选</button>
		<button>全不选</button>
		<button>反选</button>
	</div>
</body>
<script src = "../jquery-3.3.1.min.js"></script>
<script>
	// var btn = document.querySelectorAll("button");
	// var inp = document.querySelectorAll("input");

	var btn = $("button");
	var inp = $("input");
	// var all = $("#all");

	// console.log(all)

	$(inp[0]).click(function(){

		for(var i = 0;i<inp.length;i++){

			$(inp[i]).prop("checked",!inp[0].checked);
		
		}
		$(inp[0]).prop("checked",!inp[0].checked)
	})

	//全选
	$(btn[0]).click(function(){

		for(var i = 0;i<inp.length;i++){

			// inp[i].checked = "checked";

			$(inp[i]).prop("checked",true);
		}

	})

	//全不选
	$(btn[1]).click(function(){

		for(var i = 0;i<inp.length;i++){

			// inp[i].checked = "";
			// inp[i].boolean = false;

			$(inp[i]).prop("checked",false);
		}
	})

	
	//反选
	$(btn[2]).click(function(){

		for(var i = 0;i<inp.length;i++){
			
			// if(inp[i].checked){

			// 	// inp[i].checked = "";
			// 	$(inp[i]).prop("checked",false);
			// }else{

			// 	// inp[i].checked = "checked";
			// 	$(inp[i]).prop("checked",true);
			// }

			// console.log(inp[i].checked);
			//jQ DOM
			$(inp[i]).prop("checked",!inp[i].checked);
		}
	})

</script>
</html>